<template>
  <h1>我是App组件</h1>
  <h2>一个人的信息</h2>
  <h3>姓名:{{ person.name }}</h3>
  <h3>年龄:{{ person.age }}</h3>
  <button @click="test">测试触发一下Demo组件的Hello事件</button>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'Demo',
  // beforeCreate() {
  //   console.log('---beforeCreate---')
  // },
  // props: ['msg', 'school'],
  emits: ['hello'],
  setup(props, context) {
    console.log('----setup---', props)
    // console.log('----setup---', context)
    // console.log('----setup---', context.attrs) //相当于vue2中的$attrs
    // console.log('----setup---', context.emit) //触发自定义事件的
    console.log('----setup---', context.slots) //插槽
    // reactive只能作用于对象
    let person = reactive({
      name: '王某',
      age: 18
    })

    function test() {
      context.emit('hello', 666)
    }
    // 返回一个对象(常用)
    return {
      person,
      test
    }
  }
}
</script>
